<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../js/vue.js"></script>
    <style>
            img{
                width: 200px;
                height: 200px;
            }
           .colors{
               color: aqua
           }
           .fss{
               font-size: 30px;
           }
            
        </style>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- v-bind 动态绑定数据成员 -->

        <!-- 实现页面的跳转 -->
        <a v-bind:href="href">点我跳转</a></br>
        <!-- 注意 如果在指令中的值不是数据 要使用字符串包起来 -->
        <a v-bind:href="'./01-helloWorld.html'">点我跳转1</a></br>
        <a v-bind:href="href+id">点我跳转带id</a></br>
        <a v-bind:href="href+id">点我跳转带id1</a></br>
        <a v-bind:href="href+5">点我跳转带id2</a></br>
        <img v-bind:src="src" alt="">

        <!-- 简写 实现样式的替换 -->
        <p :class="color"> 普通添加单个样式</p>
        <p :class="[color,fs]"> 普通添加多个样式要用[]包起来</p>
        <p :style="{fontSize:num+'px'}">控制字体的大小</p>
        <p :class="{colors:hastrue}">动态控制有无该类</p>
        <button @click='hastrue = !hastrue'>控制hastrue的值来动态控制样式</button>





    </div>
</body>
<script>
    var vm = new Vue({
        el : '#app',
        data : {
            href : './01-helloWorld.html?id=',
            id : '1',
            src : './images/01.png',
            color : 'colors',
            fs: 'fss',
            hastrue: true,
            num :30,
        },
        method : {}
    })
</script>
</html>